<template>
	<view class="customer-detail">
		<!-- 顶部客户信息 -->
		<view class="customer-header">
			<view class="customer-info">
				<view class="avatar-section">
					<view class="avatar">
						<text class="avatar-text"
							v-if="customerInfo.customerName">{{ customerInfo.customerName.charAt(0) }}</text>
					</view>
				</view>
				<view class="info-section">
					<view class="name-row">
						<text class="customer-name">{{ customerInfo.customerName }}</text>
						<view class="customer-tags">
							<text class="tag level">{{ $getLevel(customerInfo.intentionLevel) }}</text>
							<text class="tag source">{{ $getCustomType(customerInfo.typeMap) }}</text>
						</view>
					</view>
					<view class="info-stats">
						<text class="customer-phone"
							@tap="makePhoneCall(customerInfo.phone)">{{ customerInfo.phone }}</text>
						<text class="stat-item" v-if="customerInfo.visitCount">到访{{ customerInfo.visitCount }}次</text>
						<text class="stat-item" v-if="customerInfo.followCount">跟进{{ customerInfo.followCount }}次</text>
					</view>
					<view class="info-stats" v-if="Array.isArray(customerInfo.otherPhones) && customerInfo.otherPhones.length">
						<text class="customer-phone"
							@tap="makePhoneCall(customerInfo.phone)">{{ customerInfo.otherPhones.toString() }}</text>
					</view>
				</view>
			</view>


			<view class="quick-actions-detail">
				<view class="action-item" @tap="saveCustomer(customerInfo)"
					v-if="customerInfo.isRegistration == 1 && customerInfo.consultantId == $userInfo._id">
					<view class="action-icon receive">
						<image src="/static/detail/qianyue2.png"></image>
					</view>
					<text class="action-text">接待</text>
				</view>
				<!-- 		<view class="action-item" @tap="addCustomerToMe(customerInfo)"
						v-if="customerInfo.consultantId == $userInfo._id && customerInfo.status == 2">
						 <view class="action-icon claim">🎯</view>
						<text class="action-text">认领</text>
					</view> -->
				<view class="action-item" v-if="customerInfo.consultantId == $userInfo._id && customerInfo.isRegistration != 1" @tap="addFollow">
					<view class="action-icon follow">
						<image src="@/static/detail/genjin.png"></image>
					</view>
					<text class="action-text">跟进</text>
				</view>
				<!-- <view class="action-item"
					v-if="(customerInfo.consultantId == $userInfo._id || $userInfo.role == 1) && customerInfo.status>=2 && customerInfo.isRegistration != 1"
					@tap="addIntention">
					<view class="action-icon intention">
						<image src="@/static/detail/yixiang.png"></image>
					</view>
					<text class="action-text">意向<template v-if="customerInfo.completionRate">({{customerInfo.completionRate}}%)</template></text>
				</view> -->
				<view class="action-item"
					v-if="(customerInfo.consultantId == $userInfo._id || $userInfo.role == 1) && customerInfo.status>2 && customerInfo.isRegistration != 1"
					@tap="addHouse(reservationList)">
					<view class="action-icon purchase">
						<image src="@/static/detail/rengou.png"></image>
					</view>
					<text class="action-text">认购{{reservationList.length || ''}}</text>
				</view>
				<view class="action-item"
					v-if="customerInfo.consultantId == $userInfo._id && (customerInfo.status <=10 && customerInfo.status >2) && customerInfo.isRegistration != 1"
					@tap="cancelRel">
					<view class="action-icon unbind">
						<image src="@/static/detail/wuxiao.png"></image>
					</view>
					<text class="action-text">置为无效</text>
				</view>
				
				<!-- <view class="action-item" @tap="editorCustomer">
					<view class="action-icon edit">
						<image src="@/static/detail/bianji.png"></image>
					</view>
					<text class="action-text">新增电话</text>
				</view> -->

				<view class="action-item" @tap="editorCustomer">
					<view class="action-icon edit">
						<image src="@/static/detail/bianji.png"></image>
					</view>
					<text class="action-text">编辑<template v-if="customerInfo.completionRate">({{customerInfo.completionRate}}%)</template></text>
				</view>
			</view>
		</view>

		<!-- 快捷操作 -->


		<!-- 标签页 -->
		<view class="tab-section" id="tab-section">
			<view class="tab-container">
				<view class="tab-item" v-for="(tab, index) in tabs" :key="index"
					:class="{ active: currentTab === index }" @click="switchTab(index)">
					<text class="tab-text">{{ tab }}<template
							v-if="index==3">({{reservationList.length}})</template></text>
					<view class="tab-line" v-if="currentTab === index"></view>
				</view>
			</view>
		</view>

		<!-- 内容区域 -->
		<swiper class="content-swiper" :current="currentTab" @change="onSwiperChange" :duration="300"
			:style="{'height':height}">
			<!-- 跟进记录 - 时间线布局 -->
			<swiper-item>
				<scroll-view class="tab-content" scroll-y="true" :style="{'height':height}"
					@scrolltolower="loadMoreTimeline" :show-scrollbar="false">
					<view class="timeline-container">
						<!-- 时间线 -->
						<view class="timeline">
							<!-- 当前月份 -->
							<view class="timeline-month">

								<!-- 时间线项目 -->
								<view class="timeline-items">
									<view class="timeline-item" >
										<!-- 时间线节点 -->
										<view class="timeline-node">
											<view class="node-dot disabled"></view>
											<view class="node-line"></view>
										</view>
									
										<!-- 时间线内容 -->
										<view class="timeline-content">
											<view class="timeline-header">
												<text class="item-type disabled">基本信息</text>
												<text class="item-time">{{ $formatTime(customerInfo.exportTime || customerInfo.createTime) }}</text>
											</view>
									
											<text class="item-content" style="margin-bottom: 0;">
												首次到访:{{$formatTime(customerInfo.exportTime || customerInfo.createTime)}}
											</text>
											<text class="item-content" style="margin-bottom: 0;"  v-if="customerInfo.registrationDate">
												最近到访:{{customerInfo.registrationDate}}
											</text>
									
											<!-- <view class="item-meta">
												<text class="meta-person">跟进人：{{ item.operatorName }}</text>
											</view> -->
										</view>
									</view>
									<!-- <view class="timeline-item" v-if="customerInfo.registrationDate">
										<view class="timeline-node ">
											<view class="node-dot disabled"></view>
											<view class="node-line"></view>
										</view>
									
										<view class="timeline-content">
											<view class="timeline-header">
												<text class="item-type disabled">到访</text>
												<text class="item-time">{{ customerInfo.registrationDate }}</text>
											</view>
									
											<text class="item-content" style="margin-bottom: 0;">最新一次到访时间:{{customerInfo.registrationDate}}</text>
									
											<view class="item-meta">
												<text class="meta-person">跟进人：{{ item.operatorName }}</text>
											</view> 
										</view>
									</view> -->
									<view class="timeline-item" v-for="item in timelineData" :key="item._id">
										<!-- 时间线节点 -->
										<view class="timeline-node">
											<view class="node-dot" :class="item.visitType"></view>
											<view class="node-line"></view>
										</view>

										<!-- 时间线内容 -->
										<view class="timeline-content">
											<view class="timeline-header">
												<text class="item-type"
													:class="item.visitType">{{ getTypeText(item.visitType) }}</text>
												<text class="item-time">{{ $formatTime(item.eventTime) }}</text>
											</view>

											<text class="item-content">{{ item.eventDescription }}</text>

											<view class="item-meta">
												<text class="meta-person">跟进人：{{ item.operatorName }}</text>
											</view>
										</view>
									</view>
								</view>
							</view>

						</view>

						<!-- 加载更多提示 -->
						<view class="load-more" v-if="hasMoreTimeline">
							<text class="load-text">上拉加载更多...</text>
						</view>
						<view class="no-more" v-else>
							<text class="no-more-text">没有更多记录了</text>
						</view>
					</view>
				</scroll-view>
			</swiper-item>

			<!-- 意向信息 -->
			<!-- <swiper-item>
				<scroll-view class="tab-content" scroll-y="true" :style="{'height':height}">
					<view class="profile-content">
						<view class="empty" v-if="!intertionInfo._id">
							<view class="empty-state">
								<image src="@/static/imgs/empty.png"></image>
								<text class="empty-text">暂无意向,请点击上方按钮添加</text>
							</view>
						</view>

						<view class="info-card" v-if="intertionInfo._id">
							<view class="card-header">
								<text class="card-title">房屋意向</text>
							</view>
							<view class="info-list">
							< 	<view class="info-item">
									<text class="info-label">楼栋</text>
									<text class="info-value">{{intertionInfo.preferred_buildings.toString()}}</text>
								</view> -
								<view class="info-item">
									<text class="info-label">面积</text>
									
									  <text class="info-value">{{getText(areas,intertionInfo.area)}}</text>
								</view>
								<view class="info-item">
									<text class="info-label">户型</text>
									<text class="info-value">{{getText(houseTypes,intertionInfo.houseType)}}</text>
								</view>
								<view class="info-item">
									<text class="info-label">产品</text>
									<text class="info-value">{{getText(productList,intertionInfo.product)}}</text>
								</view>
							</view>
						</view>
						<view class="info-card">
							<view class="card-header">
								<text class="card-title">预算</text>
							</view>
							<view class="info-list">
								<view class="info-item" >
									<text class="info-label">总价</text>
									<text class="info-value"> {{getText(budgetList,intertionInfo.budget)}}</text>
								</view>
								<view class="info-item">
									<text class="info-label">付款方式</text>
									<text class="info-value">{{getText(paymentOptions,intertionInfo.payment_method)}}</text>
								</view>
							</view>
						</view>
						<view class="info-card">
							<view class="card-header">
								<text class="card-title">其它信息</text>
							</view>
							<view class="info-list">
								<view class="info-item">
									<text class="info-label">关注因素</text>
									<text class="info-value">{{getText(purchasePurposes,intertionInfo.purchase_purpose)}}</text>
								</view>
								<view class="info-item" >
									<text class="info-label">预计购买时间</text>
									<text class="info-value">{{intertionInfo.purchase_timeline}}</text>
								</view>
								<view class="info-item" >
									<text class="info-label">备注</text>
									<text class="info-value">{{intertionInfo.remark}}</text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item> -->

			<!-- 客户资料 -->
			<swiper-item>
				<scroll-view class="tab-content" scroll-y="true" :style="{'height':height}">
					<view class="profile-content">
						<!-- 客户基本信息 -->
						<view class="info-card">
							<view class="card-header">
								<text class="card-title">基本信息</text>
							</view>
							<view class="info-list">
								<view class="info-item">
									<text class="info-label">姓名</text>
									<text class="info-value">{{ customerInfo.customerName }}</text>
								</view>
								<view class="info-item">
									<text class="info-label">手机号</text>
									<text class="info-value">{{ customerInfo.phone }}</text>
								</view>
								<!-- <view class="info-item">
									<text class="info-label">客户等级</text>
									<text class="info-value">{{ customerInfo.level }}</text>
								</view> -->
								<view class="info-item">
									<text class="info-label">客户来源</text>
									<text class="info-value">{{ $getCustomType(customerInfo.typeMap) }}</text>
								</view>
								
								<view class="info-item" v-if="customerInfo.intentionInfo">
									<text class="info-label">认知途径</text>
									<text class="info-value">{{getText($sourceType,customerInfo.intentionInfo.formType)}}</text>
								</view>
								
								<template v-if="customerInfo.intentionInfo">
									<view class="info-list">
										<view class="info-item">
											<text class="info-label">年龄段</text>
											<text class="info-value">{{getText($ages,customerInfo.intentionInfo.ageType)}}</text>
										</view>
										<view class="info-item">
											<text class="info-label">家庭结构</text>
											<text class="info-value">{{getText($familyList,customerInfo.intentionInfo.family)}}</text>
										</view>
										<view class="info-item">
											<text class="info-label">居住区域</text>
											<text class="info-value">{{getText($liveList,customerInfo.intentionInfo.liveAddress)}}</text>
										</view>
									</view>
								</template>
							</view>
						</view>
						<!-- 家庭信息 -->
						<!-- <view class="info-card" v-if="customerInfo.intentionInfo">
							<view class="card-header">
								<text class="card-title">家庭信息</text>
							</view>
							<view class="info-list">
								<view class="info-item">
									<text class="info-label">年龄段</text>
									<text class="info-value">{{getText($ages,customerInfo.intentionInfo.ageType)}}</text>
								</view>
								<view class="info-item">
									<text class="info-label">家庭结构</text>
									<text class="info-value">{{getText($familyList,customerInfo.intentionInfo.family)}}</text>
								</view>
								<view class="info-item">
									<text class="info-label">居住区域</text>
									<text class="info-value">{{getText($liveList,customerInfo.intentionInfo.liveAddress)}}</text>
								</view>
							</view>
						</view> -->
						
						
													
						<view class="info-card" v-if="customerInfo.intentionInfo">
							<view class="card-header">
								<text class="card-title">房屋意向</text>
							</view>
							<view class="info-list">
							<!-- 	<view class="info-item">
									<text class="info-label">楼栋</text>
									<text class="info-value">{{intertionInfo.preferred_buildings.toString()}}</text>
								</view> -->
								<view class="info-item">
									<text class="info-label">面积</text>
									<!-- 
									// <text class="info-value">{{areas.filter(item=>{return item.value == intertionInfo.area})?[0].text}}</text>
									 -->
									  <text class="info-value">{{getText($areas,customerInfo.intentionInfo.area)}}</text>
								</view>
								<view class="info-item">
									<text class="info-label">户型</text>
									<text class="info-value">{{getText($houseTypes,customerInfo.intentionInfo.houseType)}}</text>
								</view>
								<view class="info-item">
									<text class="info-label">楼栋</text>
									<text class="info-value">{{getText($buildings,customerInfo.intentionInfo.building)}}</text>
								</view>
								<view class="info-item">
									<text class="info-label">楼层</text>
									<text class="info-value">{{getText($floors,customerInfo.intentionInfo.floor)}}</text>
								</view>
								<view class="info-item">
									<text class="info-label">产品</text>
									<text class="info-value">{{getText($productList,customerInfo.intentionInfo.product)}}</text>
								</view>
								<view class="info-item">
									<text class="info-label">朝向</text>
									<text class="info-value">{{getText($houseArrow,customerInfo.intentionInfo.houseArrow)}}</text>
								</view>
							</view>
						</view>
						<view class="info-card" v-if="customerInfo.intentionInfo">
							<view class="card-header">
								<text class="card-title">预算及付款方式</text>
							</view>
							<view class="info-list">
								<view class="info-item" >
									<text class="info-label">总价</text>
									<text class="info-value"> {{getText(budgetList,customerInfo.intentionInfo.budget)}}</text>
								</view>
								<view class="info-item">
									<text class="info-label">付款方式</text>
									<text class="info-value">{{getText(paymentOptions,customerInfo.intentionInfo.payment_method)}}</text>
								</view>
								<view class="info-item">
									<text class="info-label">预期单价</text>
									<text class="info-value">{{getText($priceList,customerInfo.intentionInfo.priceYQ)}}</text>
								</view>
							</view>
						</view>
						<view class="info-card" v-if="customerInfo.intentionInfo">
							<view class="card-header">
								<text class="card-title">其它信息</text>
							</view>
							<view class="info-list">
								<view class="info-item">
									<text class="info-label">关注因素</text>
									<text class="info-value">{{getText(purchasePurposes,customerInfo.intentionInfo.purchase_purpose)}}</text>
								</view>
								<view class="info-item" >
									<text class="info-label">预计购买时间</text>
									<text class="info-value">{{customerInfo.intentionInfo.purchase_timeline}}</text>
								</view>
								<view class="info-item">
									<text class="info-label">购房用途</text>
									<text class="info-value">{{getText($useTypeList,customerInfo.intentionInfo.useType)}}</text>
								</view>
								<view class="info-item">
									<text class="info-label">抗性</text>
									<text class="info-value">{{getText($badList,customerInfo.intentionInfo.badReason)}}</text>
								</view>
								<view class="info-item" >
									<text class="info-label">备注</text>
									<text class="info-value">{{customerInfo.remark || customerInfo.intentionInfo.remark}}</text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>

			<swiper-item v-if="$userInfo.role !=5 && $userInfo.role!=4">
				<scroll-view class="tab-content" scroll-y="true" :style="{'height':height}">
					<view class="reservation-container">
						<view v-for="item in reservationList" :key="item._id" class="reservation-card">
							<!-- 卡片头部 -->
							<view class="card-header">
								<view class="house-info">
									<text
										class="house-address">{{ item.houseInfo.buildingNumber }}栋{{ item.houseInfo.roomNumber }}</text>
									<!-- <text class="property-code">{{ item.houseInfo.propertyCode }}</text> -->
								</view>
								<view class="status-tag" :class="item.statusClass">
									{{item.status}}
									{{ getStatusText(item.status) }}
								</view>
							</view>

							<!-- 房屋基本信息 -->
							<view class="basic-info">
								<view class="info-row">
									<view class="info-item">
										<text class="info-label2">面积</text>
										<text class="info-value">{{ item.houseInfo.area }}㎡</text>
									</view>
									<view class="info-item">
										<text class="info-label2">楼层</text>
										<text class="info-value">{{ item.houseInfo.floor }}F</text>
									</view>
								</view>
							</view>

							<!-- 价格信息 -->
							<view class="price-info">
								<view class="price-item">
									<text class="price-label">总价</text>
									<text class="total-price">{{ $formatPrice(item.applyPrice) }}</text>
								</view>
								<view class="price-item">
									<text class="price-label">折扣</text>
									<text class="unit-price">{{ item.applyZK*100}}折</text>
								</view>

								<view class="price-item" v-if="item.deposit">
									<text class="price-label">定金</text>
									<text class="total-price">{{ $formatPrice(item.deposit) }}</text>
								</view>
							</view>

							<view class="label-info" style="padding: 10rpx; font-size: 30rpx;font-weight: bold;">认购资料
							</view>

							<view class="images">
								<image class="image-item" :src="one.path" @tap="showImage(item.imageArr,index)"
									v-for="(one,index) in item.imageArr"></image>
							</view>
							<view class="remark-section" v-if="item.remark">
								<text class="remark-label">备注：</text>
								<text class="remark-content">{{ item.remark  }}</text>
							</view>
							<view class="time-info">
								<view class="time-item">
									<uni-icons type="calendar" size="14" color="#999"></uni-icons>
									<text class="time-text">预约时间：{{ $formatTime(item.reservationTime) }}</text>
								</view>
							</view>
							<!-- 操作按钮 -->
							<view class="action-buttons">
								<button class="btn btn-outline" @click="handleCancel(item)" v-if="item.status === 4">取消认购</button>
								<button class="btn btn-primary" @tap="linkReDetail(item)" v-if="item.status === 4">重新编辑</button>
								<button class="btn btn-primary" v-if="item.status === 3">去签约</button>
							</view>

							<!-- 备注信息 -->
						</view>
					</view>
					<view class="empty" v-if="reservationList.length == 0">
						<view class="empty-state">
							<image src="@/static/imgs/empty.png"></image>
							<text class="empty-text">暂无认购,请点击上方按钮添加</text>
							<!-- <button class="empty-btn" @click="addNewCustomer">添加客户</button> -->
						</view>
					</view>
				</scroll-view>
			</swiper-item>


		</swiper>

		<!-- // 跟进说明 -->
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" title="跟进说明" @confirm="saveFollow" :before-close="true"
				@close="closePop">
				<view style="flex:1;width:100%" class="inputDialog-content">
					<textarea class="pop-textarewa" v-model="textArea" auto-height placeholder="请输入" />
					<uni-data-checkbox v-model="gouTType" :localdata="gouTList" />
				</view>
			</uni-popup-dialog>
		</uni-popup>


		<uni-popup ref="cancelDailog" type="dialog">
			<uni-popup-dialog ref="inputClose" title="放弃客户" @confirm="cancelCustomerFun" :before-close="true"
				@close="closePop">
				<view style="flex:1;width:100%" class="inputDialog-content">
					<textarea class="pop-textarewa" v-model="cancelText" auto-height placeholder="请输入原因" />
				</view>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab: 0,
				tabs: ['跟进记录', '客户资料'],
				customerInfo: {
					intentionInfo:null
				},
				timelineData: [],
				gjPageNo: 1,
				yxPageNo: 1,
				intertionInfo: {
					total_budget: {},
					preferred_buildings: {},
					down_payment_budget: {},
					total_budget: {},
					preferred_unit_types: [],
					preferred_unit_types: []
				},
				hasMoreTimeline: true,
				loading: false,
				height: '50px',
				textArea: '',
				gouTList: [{
						text: '到访',
						value: 'visit'
					}, {
						text: '去电',
						value: 'call'
					},
					{
						text: '来电',
						value: 'wechat'
					}
				],
				gouTType: '',
				reservationList: [],
				imageValue: [],
				uploading: false,
				cancelText: '',
				houseTypes: [{
						text: '一室',
						value: '1'
					},
					{
						text: '两室',
						value: '2'
					},
					{
						text: '三室',
						value: '3'
					},
					{
						text: '四室',
						value: '4'
					},
				],
				productList: [{
						text: '高层',
						value: '1'
					},
					{
						text: '洋房',
						value: '2'
					},
					{
						text: '别墅',
						value: '3'
					},
					{
						text: '商业',
						value: '4'
					},
				],
				paymentOptions: [{
						text: '全款',
						value: '1'
					},
					{
						text: '商业贷款',
						value: '2'
					},
					{
						text: '公积金贷款',
						value: '3'
					},
					{
						text: '组合贷款',
						value: '4'
					}
				],
				// 50以下，60，70，80，90，100，110，120，130，140，150以上
				areas: [{
						"text": "50以下",
						"value": 50
					},
					{
						"text": "60",
						"value": 60
					},
					{
						"text": "70",
						"value": 70
					},
					{
						"text": "80",
						"value": 80
					},
					{
						"text": "90",
						"value": 90
					},
					{
						"text": "100",
						"value": 100
					},
					{
						"text": "110",
						"value": 110
					},
					{
						"text": "120",
						"value": 120
					},
					{
						"text": "130",
						"value": 130
					},
					{
						"text": "140",
						"value": 140
					},
					{
						"text": "150以上",
						"value": 150
					}
				],
				purchasePurposes: [{
						text: '户型',
						value: '1',
					},
					{
						text: '面积',
						value: '2',
					},
					{
						text: '开发商',
						value: '3',
					},
					{
						text: '投资回报',
						value: '4',
					},
					{
						text: '地理位置',
						value: '5',
					},
					{
						text: '物业管理',
						value: '6',
					},
					{
						text: '配套',
						value: '7',
					},
					{
						text: '学校',
						value: '8',
					}, {
						text: '价格',
						value: '9',
					}
				],
				budgetList: [{
						"text": "70以下",
						"value": "70"
					},
					{
						"text": "70-90",
						"value": "80"
					},
					{
						"text": "90-110",
						"value": "100"
					},
					{
						"text": "110-130",
						"value": "120"
					},
					{
						"text": "130-150",
						"value": "140"
					},
					{
						"text": "150-170",
						"value": "160"
					},
					{
						"text": "170以上",
						"value": "180"
					}
				]
			}
		},
		mounted() {
			this.$nextTick(function() {
				setTimeout(() => {
					uni.getSystemInfo({
						success: (resu) => {
							const query = uni.createSelectorQuery()
							query.select('#tab-section').boundingClientRect()
							query.exec(res => {
								console.log(res)
								console.log('resu.windowHeight', resu.windowHeight)
								this.height = resu.windowHeight - res[0].top - 50 +
									'px';
							})
						},
						fail: (res) => {}
					})
				}, 100)
			})
		},
		async onLoad(query) {
			this.customerInfo.id = query.id
			uni.setStorageSync('custId', query.id)
			this.getCustomInfo(query.id)
			let res = await this.getGJList()
			this.timelineData = res.list
			if (res.hasNext) {
				this.hasMoreTimeline = true
			} else {
				this.hasMoreTimeline = false
			}
		},
		onShow() {
			setTimeout(async () => {
				let id = uni.getStorageSync('custId')
				this.getIntertion(id)
				this.getCustomInfo(id)
				const appUserInfo = this.$userInfo
				if (appUserInfo.role != 4 && appUserInfo.role != 5) {
					this.tabs = ['跟进记录', '客户资料', '认购信息']
					this.getHouseReservation(id)
				}
			}, 10)
		},
		methods: {
			getText(arr,val){
				let res = ''
				if(Array.isArray(val)){
					val.map(item=>{
						arr.map(one=>{
							if(one.value == item){
								res = res +' ' + (one.text || one.label)
							}
						})
					})
				}else{
					for (var key in arr) {
						const item = arr[key]
						if(item.value == val){
							res = item.text || item.label
							break;
						}
					}
				}
				if(!res){
					res = val
				}
				return res
			},
			async addCustomerToMe(item) {
				const bangdGX = await this.$cloudOBjAjax('suuny-custom', 'bindConsultant', {
					customerId: item._id,
					customerName: item.customerName,
					consultantId: this.$userInfo._id
				})

				item.status = 3

				let postData = {
					customerId: item._id,
					customerName: item.customerName,
					consultantId: this.$userInfo._id
				}
				const res = await this.$cloudOBjAjax('customer-lifecycle-history', 'bindConsultant', postData)
			},
			async saveCustomer(item) {
				const bangdGX = await this.$cloudOBjAjax('suuny-custom', 'saveConsultant', {
					customerId: item._id,
					customerName: item.customerName,
					consultantId: this.$userInfo._id
				})
				item.isRegistration = 2
				let postData = {
					customerId: item._id,
					customerName: item.customerName,
					consultantId: this.$userInfo._id
				}
				const res = await this.$cloudOBjAjax('customer-lifecycle-history', 'addWaitRecord', postData)
			},
			// 切换标签页
			switchTab(index) {
				this.currentTab = index
			},

			// Swiper切换
			onSwiperChange(e) {
				this.currentTab = e.detail.current
			},

			// 获取类型文本
			getTypeText(type) {
				const typeMap = {
					'visit': '到访',
					'call': '去电',
					'wechat': '来电',
					'info': '资料更新'
				}
				return typeMap[type] || '跟进记录'
			},

			// 拨打电话
			makePhoneCall() {
				uni.makePhoneCall({
					phoneNumber: this.customerInfo.phone
				})
			},
			cancelRel() {
				this.$refs.cancelDailog.open()
			},
			async cancelCustomerFun() {
				let text = this.cancelText
				if (!text) {
					return this.$simpleToast('请输入原因')
				}

				try {
					await this.$cloudOBjAjax('customer-lifecycle-history', 'cancelBindConsultant', {
						customerId: this.customerInfo._id,
						consultantId: this.customerInfo.consultantId,
						content: text,
					})
					await this.$cloudOBjAjax('suuny-custom', 'updateCustomer', {
						_id: this.customerInfo._id,
						status: 4,
						consultantId: '',
						consultantName: ''
					})
					this.closePop()
					uni.switchTab({
						url: "/pages/main/main"
					})
				} catch (error) {
					//TODO handle the exception
					this.$simpleToast(err.errMsg || '出错了,请联系管理员')
				}

			},
			// 添加跟进
			addFollow() {
				let customer = this.customerInfo
				// if(customer.status <=2){
				// 	return this.$simpleToast('还没有绑定置业顾问，不能写跟进')
				// }
				this.$refs.inputDialog.open()
			},
			saveFollow() {
				let text = this.textArea
				let type = this.gouTType
				if (!text || !type) {
					return this.$simpleToast('请输入跟进内容')
				}
				this.$cloudOBjAjax('customer-lifecycle-history', 'addFollow', {
					customerId: this.customerInfo._id,
					content: text,
					type: type
				}).then(res => {
					this.$cloudOBjAjax('suuny-custom', 'updateFollow', {
						_id: this.customerInfo._id
					})
					// if(this.customerInfo.isRegistration !=0){
					// 	// 取消接待 把isRegistration 为0 说明已经接待完成
					// 	this.canCellAssignConsultant(this.customerInfo._id)
					// }
					this.closePop()
				}).catch(err => {
					console.log('嘻嘻嘻', err)
					this.$simpleToast(err.errMsg || '出错了,请联系管理员')
				})
			},
			closePop() {
				this.textArea = ''
				this.gouTType = ''
				this.cancelText = ''
				this.$refs.cancelDailog.close()
				this.$refs.inputDialog.close()
			},
			canCellAssignConsultant(id) {
				this.$cloudOBjAjax('suuny-custom', 'canCellAssignConsultant', {
					_id: id
				})
			},
			// 添加意向
			addIntention() {
				const curCustom = uni.setStorageSync('curCustom', this.customerInfo)
				uni.navigateTo({
					url: '/pages/intention/add?id=' + (this.intertionInfo._id || '')
				})
			},
			async getGJList() {
				return await this.$cloudOBjAjax('customer-lifecycle-history', 'getCustomerLifecycle', {
					customerId: this.customerInfo.id,
					eventType: 17,
					pageNo: this.gjPageNo,
					pageSize: 10
				})
			},

			// 上拉加载更多
			loadMoreTimeline() {
				if (this.loading || !this.hasMoreTimeline) return

				this.loading = true

				// 模拟加载更多数据
				setTimeout(async () => {
					this.gjPageNo = this.gjPageNo++
					const newData = await this.getGJList()
					this.timelineData = [...this.timelineData, ...newData.list]
					if (res.hasNext) {
						this.hasMoreTimeline = true
					} else {
						this.hasMoreTimeline = false
					}
					this.loading = false

					uni.showToast({
						title: '加载完成',
						icon: 'success'
					})
				}, 1000)
			},
			// 获取历史
			async getHistoryList(id) {
				let res = await this.$cloudOBjAjax('customer-lifecycle-history', 'getCustomerLifecycle', {
					customerId: id,
					getAll: true
				})

				console.log(res)
			},
			// 获取客户详情
			async getCustomInfo(id) {
				let res = await this.$cloudOBjAjax('suuny-custom', 'getCustomerById', {
					id: id,
				})
				this.customerInfo = res
				
				
				console.log('loadMoreTimeline',res)
			},
			async getIntertion(id) {
				let res = await this.$cloudOBjAjax('custom-intertion', 'get', {
					customerId: id,
				})
				if (res && res.length) {
					this.intertionInfo = res[0]
				} else {
					this.intertionInfo = {
						total_budget: {},
						preferred_buildings: {},
						down_payment_budget: {},
						total_budget: {},
						preferred_unit_types: [],
						preferred_unit_types: []
					}
				}
			},
			getLevel(level) {
				let res = ''
				switch (level) {
					case 1:
						res = 'A类'
						break;
					case 2:
						res = 'B类'
						break;
					case 3:
						res = 'C类'
						break;
					case 4:
						res = 'D类'
						break;
					default:
						res = 'E类'
						break;
				}

				return res
			},
			editorCustomer() {
				const data = this.customerInfo
				uni.setStorageSync('curCustomerInfo', data)
				uni.navigateTo({
					url: "/pages/intention/add"
				})
			},
			addHouse() {
				const data = this.customerInfo
				uni.setStorageSync('curCustomerInfo', data)
				// uni.setStorageSync('curIntertionInfo', this.intertionInfo)
				uni.navigateTo({
					url: "/pages/customer/addHouse"
				})
			},
			async getHouseReservation(id) {
				await this.$cloudOBjAjax('house-reservation', 'getList', {
					customerId: id,
				}).then(res => {
					res.list?.map(item=>{
						item.statusClass = this.getStatusClass(item.status)
						return item
					})
					this.reservationList = res.list
				})
			},
			getStatusClass(status) {
				const statusMap = {
					1: 'status-pending',
					2: 'status-confirmed',
					3: 'status-cancelled',
					4: 'status-success',
					5: 'status-cancelled',
					6: 'status-expired',
				}
				return statusMap[status] || 'status-default'
			},
			
			// 获取状态文本
			getStatusText(status) {
				const statusTextMap = {
					0:"已过期",
					1: '待审批', // 等待经理初步审核价格
					2: '待营销经理审核', // 经理审核通过,
					3: '待签约', //审核通过"
					4: '审核不通过',//初步审核不通过
				}
				return statusTextMap[status] || '未知状态'
			},
			uploadprogress(e) {
				if (e.progress != 100) {
					this.uploading = true
				} else {
					this.uploading = false
				}
			},
			// 选择图片
			async uploadFile(item) {
				if (this.uploading) {
					return
				}
				this.uploading = true

				this.$cloudOBjAjax('house-reservation', 'uploadFile', {
					reservationId: item._id,
					imageArr: item.imageArr,
					deposit: item.deposit
				}).then(res => {

				})
			},
			// 根据文件路径获取 MIME 类型
			showImage(arr, index) {
				let imgs = arr.map(item => {
					return item.path
				})

				uni.previewImage({
					urls: imgs,
					current: index
				})
			},
			handleCancel(item) {
				uni.showModal({
					title: '确认取消',
					content: '确定要取消吗？',
					success: (res) => {
						if (res.confirm) {
							this.$cloudOBjAjax('house-reservation', '')

						}
					}
				})
			},
			linkReDetail(item) {
				const data = this.customerInfo
				uni.setStorageSync('curCustomerInfo', data)
				uni.setStorageSync('curIntertionInfo', this.intertionInfo)
				uni.setStorageSync('curAddHouse', item)
				uni.navigateTo({
					url: '/pages/customer/addHouse?id=' + item._id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.customer-detail {
		background: #F8FBFF;
		height: 100%;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;

		.customer-header {
			border-radius: 16rpx;
			color: white;
			margin-bottom: 20rpx;
		}
	}

	/* 顶部客户信息 */


	.customer-info {
		display: flex;
		align-items: flex-start;
	}

	.avatar-section {
		width: 96rpx;
		height: 96rpx;
		text-align: center;
		background: rgba(225, 242, 250, 1);
		border-radius: 50%;
		margin-right: 20rpx;

		.avatar-text {
			font-size: 40rpx;
			color: #498CFE;
			line-height: 96rpx;
		}
	}

	.info-section {
		flex: 1;
	}

	.name-row {
		display: flex;
		align-items: center;
	}

	.customer-name {
		font-size: 36rpx;
		font-weight: bold;
		margin-right: 20rpx;
	}

	.customer-tags {
		display: flex;
		gap: 12rpx;
	}

	.tag {
		padding: 6rpx 16rpx;
		border-radius: 20rpx;
		font-size: 22rpx;

		&.level {
			background: #ff6b6b;
		}

		&.source {
			background: rgba(255, 255, 255, 0.3);
		}
	}


	.info-stats {
		display: flex;
		gap: 30rpx;
		font-size: 24rpx;
		line-height: 40rpx;
	}

	.stat-item {
		font-size: 26rpx;
		opacity: 0.8;
	}

	/* 快捷操作 */
	.quick-actions-detail {
		padding-top: 50rpx;
		display: flex;
		justify-content: space-between;
	}

	.action-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.action-icon {
		image {
			width: 60rpx;
			height: 60rpx;
		}

	}

	.action-text {
		font-size: 28rpx;
	}

	/* 标签页 */
	.tab-section {
		background: white;
		padding: 0 30rpx;
	}

	.tab-container {
		display: flex;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		padding: 24rpx 0;
		position: relative;

		&.active {
			.tab-text {
				color: #1890ff;
				font-weight: 600;
			}
		}
	}

	.tab-text {
		font-size: 30rpx;
		color: #666;
	}

	.tab-line {
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 80rpx;
		height: 4rpx;
		background: #1890ff;
		border-radius: 2rpx;
	}

	/* 内容区域 */


	/* 时间线容器 */
	.timeline-container {
		padding: 30rpx;
	}

	.timeline-month {
		margin-bottom: 40rpx;
	}

	.month-title {
		display: block;
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
		padding-left: 40rpx;
	}

	.timeline-items {
		position: relative;
	}

	.timeline-item {
		display: flex;
		margin-bottom: 40rpx;
		position: relative;
	}

	/* 时间线节点 */
	.timeline-node {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 40rpx;
		margin-right: 30rpx;
	}

	.node-dot {
		width: 24rpx;
		height: 24rpx;
		border-radius: 50%;
		border: 4rpx solid white;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
		z-index: 2;
		position: relative;

		&.visit {
			background: #52c41a;
		}

		&.call {
			background: #1890ff;
		}

		&.wechat {
			background: #498CFE;
		}

		&.info {
			background: #fa8c16;
		}

		&.current {
			background: #ff4d4f;
		}

		&.completed {
			background: #52c41a;
		}
		&.disabled{
			background: #d9d9d9;
		}
	}

	.node-line {
		flex: 1;
		width: 2rpx;
		background: #e8e8e8;
		margin-top: 8rpx;
	}

	.timeline-item:last-child .node-line {
		display: none;
	}

	/* 时间线内容 */
	.timeline-content {
		flex: 1;
		background: white;
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
		margin-bottom: 20rpx;
	}

	.timeline-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.item-type {
		padding: 8rpx 20rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
		color: white;

		&.visit {
			background: #52c41a;
		}

		&.call {
			background: #1890ff;
		}

		&.wechat {
			background: #498CFE;
		}

		&.info {
			background: #fa8c16;
		}

		&.current {
			background: #ff4d4f;
		}

		&.completed {
			background: #52c41a;
		}
		&.disabled{
			background: #999;
		}
	}

	.item-time {
		font-size: 24rpx;
		color: #999;
	}

	.item-content {
		display: block;
		font-size: 28rpx;
		color: #333;
		line-height: 1.6;
		margin-bottom: 20rpx;
	}

	.item-meta {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.meta-person {
		font-size: 24rpx;
		color: #999;
	}

	/* 意向详情 */
	.intention-details {
		background: #f8f9fa;
		border-radius: 8rpx;
		padding: 20rpx;
		margin-top: 16rpx;
	}

	.detail-item {
		display: flex;
		margin-bottom: 12rpx;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.detail-label {
		font-size: 26rpx;
		color: #666;
		width: 160rpx;
	}

	.detail-value {
		font-size: 26rpx;
		color: #333;
		font-weight: 500;
		flex: 1;
	}

	/* 客户资料卡片 */
	.profile-content {
		padding: 30rpx;
	}

	.info-card {
		background: white;
		border-radius: 16rpx;
		padding: 30rpx 10rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
	}

	.card-header {
		margin-bottom: 30rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.card-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.info-list {
		display: flex;
		flex-direction: column;
		gap: 24rpx;
	}

	.info-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.info-label {
		font-size: 28rpx;
		color: #666;
		width: 180rpx;
		text-align: left;
	}

	.info-value {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
		flex: 1;
		text-align: right;
	}

	/* 加载更多 */
	.load-more,
	.no-more {
		text-align: center;
		padding: 40rpx;
	}

	.load-text {
		color: #1890ff;
		font-size: 28rpx;
	}

	.no-more-text {
		color: #999;
		font-size: 28rpx;
	}

	.pop-textarewa {
		border: 1px solid #ccc;
		border-radius: 10rpx;
		padding: 10rpx;
		min-height: 100rpx;
		width: calc(100% - 20rpx);
	}

	::v-deep .inputDialog-content {
		.uni-data-checklist {
			padding: 10rpx 0;

			.checklist-box {
				margin-right: 20rpx;

				&.is-checked {
					color: #dd524d;

					.radio__inner {
						border-color: #dd524d !important;

						.radio__inner-icon {
							background-color: #dd524d !important;
						}
					}

					.checklist-text {
						color: #dd524d !important;
					}
				}
			}
		}
	}




	.reservation-container {
		padding: 30rpx;
		background: #f8f9fa;
	}

	.reservation-card {
		background: #ffffff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
		border: 1rpx solid #f0f0f0;
	}

	/* 卡片头部 */
	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 30rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.house-address {
		font-size: 36rpx;
		font-weight: 600;
		color: #1a1a1a;
		display: block;
		margin-bottom: 8rpx;
	}

	.property-code {
		font-size: 24rpx;
		color: #999;
	}

	.status-tag {
		padding: 8rpx 20rpx;
		border-radius: 20rpx;
		font-size: 22rpx;
		font-weight: 500;
	}

	.status-pending {
		background: #e6f7ff;
		color: #1890ff;
		border: 1rpx solid #91d5ff;
	}

	.status-confirmed {
		background: #f6ffed;
		color: #52c41a;
		border: 1rpx solid #b7eb8f;
	}

	.status-cancelled {
		background: #fff2f0;
		color: #ff4d4f;
		border: 1rpx solid #ffccc7;
	}

	.status-success {
		background: linear-gradient(135deg, #FFA500 0%, #FF8C00 100%);
		color: white;
	}

	.status-expired {
		background: #fafafa;
		color: #d9d9d9;
		border: 1rpx solid #d9d9d9;
	}

	/* 基本信息 */
	.basic-info {
		margin-bottom: 20rpx;
	}

	.info-row {
		display: flex;
		justify-content: space-between;
	}

	.info-item {
		flex: 1;
		text-align: center;
		padding: 0 10rpx;
	}

	.info-label2 {
		display: block;
		font-size: 24rpx;
		color: #666;
		text-align: center;
		width: 120rpx;
	}

	.info-value {
		display: block;
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}

	/* 价格信息 */
	.price-info {
		background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
		border-radius: 12rpx;
		padding: 10rpx;
		margin-bottom: 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.price-item {
		text-align: center;
		flex: 1;
	}

	.price-label {
		display: block;
		font-size: 24rpx;
		color: #666;
		margin-bottom: 8rpx;
	}

	.total-price {
		display: block;
		font-size: 32rpx;
		color: #ff6b35;
		font-weight: bold;
	}

	.unit-price {
		display: block;
		font-size: 26rpx;
		color: #333;
		font-weight: 500;
	}

	/* 时间信息 */
	.time-info {
		padding: 20rpx 0;
	}

	.time-item {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.time-item:last-child {
		margin-bottom: 0;
	}

	.time-text {
		font-size: 26rpx;
		color: #666;
		margin-left: 12rpx;
	}

	/* 操作按钮 */
	.action-buttons {
		display: flex;
		gap: 20rpx;
		margin-bottom: 20rpx;
		margin-top: 20rpx;
	}

	.btn {
		flex: 1;
		height: 70rpx;
		border-radius: 12rpx;
		font-size: 26rpx;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.btn-primary {
		color: white;
	}

	.btn-secondary {
		background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
		color: white;
	}

	.btn-outline {
		background: transparent;
		border: 1rpx solid #d9d9d9;
		color: #666;
	}

	/* 备注信息 */
	.remark-section {
		background: #fafafa;
		border-radius: 8rpx;
		padding: 20rpx;
		border-left: 4rpx solid #1890ff;
		margin-top: 20rpx;
	}

	.remark-label {
		font-size: 26rpx;
		color: #666;
		font-weight: 500;
	}

	.remark-content {
		font-size: 26rpx;
		color: #333;
		line-height: 1.5;
	}

	.images {
		display: flex;
		gap: 20rpx;
		padding: 20rpx;
		;

		.image-item {
			width: 120rpx;
			height: 120rpx;
			border-radius: 10rpx;
		}
	}
</style>